<!DOCTYPE html>
<html>
    <head>
        <title>分页栏组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
       <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../../avalon.js">

        </script>
        <script src="../highlight/shCore.js">

        </script>
        <script>
            avalon.library("aoyou", {
                $ready: function (widget) {
                    avalon.log("控件已经构建完毕")
                }
            })
            avalon.bind(document, "keyup", function (e) {
                if (e.which === 37 || e.which === 39) {
                    var widget = avalon.vmodels.keyBrowse
                    if (widget) {
                        widget.jumpPage(e, e.which === 39 ? "next" : "prev")
                    }
                }
            })


            avalon.bind(document, window.netscape ? "DOMMouseScroll" : "mousewheel", function (e) {
                var dir = (e.wheelDelta || -e.detail) > 0 ? "prev" : "next"
                var widget = avalon.vmodels.scrollBrowse
                if (widget) {
                    widget.jumpPage(e, dir)
                }
            })
            
            require(["./component/pager/avalon.pager"], function () {
                avalon.define({
                    $id: "test",
                    $pager: {
                        nextText: "next",
                        prevText: "prev",
                        showPages: 5
                    }
                })
                avalon.scan()
            })

        </script>

    </head>
    <body ms-controller="test">
        <h1>通过左右方向键或滚轮改变页码</h1>
    <aoyou:pager $id="keyBrowse" config="$pager"></aoyou:pager><br/>
    <aoyou:pager $id="scrollBrowse" config="$pager"></aoyou:pager>

    <pre class="brush:html;gutter:false;toolbar:false">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;分页栏组件&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"&gt;
        &lt;script src="../../avalon.js"&gt;&lt;/script&gt;
        &lt;script src="./shCore.js"&gt;&lt;/script&gt;
        &lt;script&gt;
            avalon.library("aoyou", {
                $ready: function (widget) {
                    avalon.log("控件已经构建完毕")
                }
            })
            avalon.bind(document, "keyup", function (e) {
                if (e.which === 37 || e.which === 39) {
                    var widget = avalon.vmodels.keyBrowse
                    if (widget) {
                        widget.jumpPage(e, e.which === 39 ? "next" : "prev")
                    }
                }
            })
            avalon.bind(document, window.netscape ? "DOMMouseScroll" : "mousewheel", function (e) {
                var dir = (e.wheelDelta || -e.detail) > 0 ? "prev" : "next"
                var widget = avalon.vmodels.scrollBrowse
                if (widget) {
                    widget.jumpPage(e, dir)
                }
            })
            require(["./component/pager/avalon.pager"], function () {
                avalon.define({
                    $id: "test",
                    $pager: {
                        nextText: "next",
                        prevText: "prev",
                        showPages: 5
                    }
                })
                avalon.scan()
            })

        &lt;/script&gt;
        
    &lt;/head&gt;
    &lt;body ms-controller="test"&gt;
        &lt;h1&gt;通过左右方向键或滚轮改变页码&lt;/h1&gt;
        &lt;aoyou:pager $id="keyBrowse" config="$pager"&gt;&lt;/aoyou:pager&gt;&lt;br/&gt;
        &lt;aoyou:pager $id="scrollBrowse" config="$pager"&gt;&lt;/aoyou:pager&gt;
    &lt;/body&gt;
&lt;/html&gt;
        
    </pre>
</body>
</html>
